<template>
    <div class="pageShowLimit">
        <div class="add">
            <el-button type="primary" size="small" @click="handleAdd(1)">添加</el-button>
        </div>
        <el-table
            :data="listData"
            border
            style="width: 100%">
            <el-table-column
            align="center"
            fixed
            label="序号"
            type="index"
            width="80">
            </el-table-column>
            <el-table-column
            align="center"
            prop="type"
            label="类型"
            min-width="120">
            <template slot-scope="scope">
                <span v-show="scope.row.type == 0">购房者端</span>
                <span v-show="scope.row.type == 2">经纪人端</span>
                <span v-show="scope.row.type == 1">管家端</span>
            </template>
            </el-table-column>
            <el-table-column
            align="center"
            prop="module"
            label="屏蔽模块"
            min-width="150">
            <template slot-scope="scope">
                <span v-show="scope.row.module == 1">保险业务</span>
                <span v-show="scope.row.module == 2">公司佣金</span>
            </template>
            </el-table-column>
            <el-table-column
            align="center"
            prop="shielding"
            label="是否屏蔽"
            min-width="120">
            <template slot-scope="scope">
                <span v-show="scope.row.shielding == 1">屏蔽</span>
                <span v-show="scope.row.shielding == 0">不屏蔽</span>
            </template>
            </el-table-column>
            <el-table-column
            align="center"
            prop="content"
            label="屏蔽说明"
            min-width="300">
            </el-table-column>
            <el-table-column
            align="center"
            :formatter="timeFormatter"
            label="操作时间"
            min-width="180">
            </el-table-column>
            <el-table-column
            align="center"
            prop="updatePeople"
            label="操作人"
            min-width="120">
            </el-table-column>
            <el-table-column
            fixed="right"
            align="center"
            label="操作"
            min-width='100'>
            <template slot-scope="scope">
                <el-button type="text" size="mini" @click="handleAdd(2,scope.row)">编辑</el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-pagination
            style="margin-top:20px"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageData.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageData.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total">
        </el-pagination>
        <el-dialog
            :title="val == 1?'添加APP':'编辑'"
            :visible.sync="dialogVisible"
            width="500px"
            :before-close="handleClose">
            <el-form class="demo-form-inline" label-width="100px" label-position="left">
                <el-form-item label="客户端：" >
                <el-select v-model="addForm.type" placeholder="" @change="typeChange" size="mini" :disabled="val == 2?true:false">
                    <el-option :label="item.type" :value="item.val" v-for="(item,idx) in typeList" :key="idx"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="业务：">
                <el-select v-model="addForm.module" placeholder="" size="mini">
                    <el-option :label="item.type" :value="item.val" v-for="(item,idx) in businessList" :key="idx"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="是否屏蔽：">
                <el-radio-group v-model="addForm.shielding">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                </el-radio-group>
                </el-form-item>
                <el-form-item label="屏蔽说明：">
                <textarea id="" cols="40" rows="5" maxlength="200" v-model="addForm.content"></textarea>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer" style="text-align: left">
                <el-button type="primary" @click="handleSave">保存</el-button>
                <el-button type="primary" @click="handleCancle">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import util from '@/common/utils'
export default{
    name:'pageShowLimit',
    title:'页面权限展示',
    data(){
        return {
            listData: [],
            pageData:{
                pageSize:10,
                pageNum:1
            },
            total:0,
            addForm:{
                type:0,
                module:1,
                shielding:'1',
                content:'',
            },
            typeList:[
                {val:0,type:'购房者端'},
                {val:1,type:'管家端'},
                {val:2,type:'经纪人端'},
            ],
            businessList:[
                {val:1,type:'保险业务'},
            ],
            row:undefined,
            val:undefined,
            dialogVisible:false,
        }
    },
    created(){
        this.getListData()
    },
    methods:{
        typeChange(val){
            console.log(val);
            if(val == 2){
                this.businessList = [
                    {val:1,type:'保险业务'},
                    {val:2,type:'公司佣金'}
                ]
            }else{
                this.businessList = [
                    {val:1,type:'保险业务'},
                ]
            }
        },
        timeFormatter(row){
            return util.getTimeString(row.updateTime)
        },
        // 添加
        handleAdd(val,row){
            this.dialogVisible = true
            this.val = val
            this.row = row
            this.addForm = {
                type:0,
                module:1,
                shielding:'1',
                content:'',
            }
            if(val == 2){
                this.addForm.type = row.type
                this.addForm.module = row.module
                this.addForm.shielding = String(row.shielding)
                this.addForm.content = row.content
                if(row.type == 2){
                    this.businessList = [
                        {val:1,type:'保险业务'},
                        {val:2,type:'公司佣金'}
                    ]
                }else{
                    this.businessList = [
                        {val:1,type:'保险业务'},
                    ]
                }
            }
        },
        // 保存
        handleSave(){
            // 类型
            if(this.addForm.type != '0' && this.addForm.type != '1' && this.addForm.type != '2'){
                this.$message({
                type:'warning',
                message:'请选择类型'
                })
                return
            }
            // 业务
            if(!this.addForm.module){
                this.$message({
                type:'warning',
                message:'请选择业务'
                })
                return
            }
            // 是否屏蔽
            if(this.addForm.shielding !='0' && this.addForm.shielding !='1'){
                this.$message({
                type:'warning',
                message:'请选择是否屏蔽'
                })
                return
            }
            // 屏蔽说明
            if(!this.addForm.content){
                this.$message({
                type:'warning',
                message:'请填写屏蔽说明'
                })
                return
            }
            // 添加
            if(this.val == 1){
                
                this.$axios.post('/cms/module/shielding/save',{
                    content:this.addForm.content,  // 屏蔽说明
                    shielding:this.addForm.shielding,  // 是否屏蔽
                    type:this.addForm.type, // 类型
                    module:this.addForm.module, // 业务
                }).then(res=>{
                    console.log(res);
                    this.$message({
                        type:'success',
                        message:'添加成功'
                    })
                    this.getListData()
                    this.dialogVisible = false
                    this.clearData()
                })
            }else if(this.val == 2){
                console.log('编辑');
                this.$axios.post('/cms/module/shielding/update',{
                    content:this.addForm.content,  // 屏蔽说明
                    shielding:this.addForm.shielding,  // 是否屏蔽
                    type:this.row.type, // 类型
                    module:this.addForm.module, // 业务
                    id:this.row.id, // 
                }).then(res=>{
                    console.log(res)
                    this.$message({
                        type:'success',
                        message:'编辑成功'
                    })
                    this.getListData()
                    this.dialogVisible = false
                    this.clearData()
                })
            }
        
        },
        clearData(){
            this.addForm = {
                content:'',
                shielding:'',
                type:'',
                version:''
            }
        },
        // 取消
        handleCancle(){
            this.dialogVisible = false
            this.clearData()
        },
        // 获取列表数据
        getListData(){
            console.log(this.$axios);
            this.$axios.post('/cms/module/shielding/list',{
                pageSize:this.pageData.pageSize,
                pageNum:this.pageData.pageNum,
            }).then(res=>{
                console.log(res)
                this.listData = res.list
                this.total = res.total
            })
        },
        handleSizeChange(val) {
            this.pageData.pageSize = val
            this.getListData()
        },
        handleCurrentChange(val) {
            this.getListData()
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                done();
                })
                .catch(_ => {});
            },
    }
}
</script>
<style lang="stylus" scoped>
    .add{
        margin-bottom :20px;
    }
</style>